<template>
  <div>
     <ckeditor v-model="editorData" :config="editorConfig" @ready="onEditorReady"></ckeditor>


     <input type="file"  @change="ev => testFile = ev.target.files">
     <button @click="testSubmitFn">提交测试</button>


     <v-btn
           :loading="submitBtn"
           :disabled="submitBtn"
           color="blue-grey"
           class="ma-2 white--text float-right"
           @click="submitFn"
         >
            提交
           <v-icon right dark>mdi-cloud-upload</v-icon>
           <!-- 自定义旋转动画和图标 -->
           <template v-slot:loader>
               <span class="custom-loader">
                 <v-icon>mdi-islam</v-icon>
               </span>
           </template>
      </v-btn>
  </div>
</template>

<script>
  export default {
      data() {
          return {
              testFile:'',


              ckeditorObj:null,//存储ckeditor对象
              editorData: '<p>请输入内容</p>',

              editorConfig: {
                  //image2会修改image的Dialog的样式和upload
                  extraPlugins: 'uicolor,save,newpage,preview,print,selectall,uploadfile,image2,colorbutton,colordialog',
                  // baseHref:'http://www.example.com/path/',//基础上传路径
                  // removePlugins:'image',
                  //removeDialogTabs:'image:Link;image:advanced',//image的dialog的tag中没有Link选项
                  // filebrowserUploadUrl:'text/text',//图片上传地址
                  filebrowserImageUploadUrl:"http://www.tpdemo.com/tools/index/uploadImg",
                  // filebrowserImageUploadUrl:"/tools/index/uploadImg",
                  // imageUploadUrl:'text/imgUrl',
                  //颜色按钮,
                  colorButton_enableMore:true,//需要先引入colordialog插件才能显示
                  colorButton_enableAutomatic:true,
                  colorButton_normalizeBackground:true,

                  toolbar:[
                    /* [ 'Source', '-', 'Bold', 'Italic','Image','Link'],
                    [ "UIColor"] */
                     ['Source','-','Save','NewPage','Preview','-','Templates'],
                     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                     '/',
                     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                      ['Link','Unlink','Anchor'],
                      ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                     '/',
                      ['Styles','Format','Font','FontSize','Maximize'],
                      ['TextColor','BGColor','UploadFile','UIColor']
                  ],
                  height:"200px",//高度
                  bodyId:"ckeditorDiv",//多个ckeditor时用于区分
                  uiColor:"#21bf8b",//主题颜色
                  image_previewText:" ",//image图片预览时显示为空
              },
              submitBtn:false,//提交按钮

          };
      },
      created() {

      },
      beforeMount(){

      },
      mounted(){
      },
      methods:{
        testSubmitFn(){
          /* console.log(this.testFile)
          console.log(this.inputValue2) */

          var formobimg = new FormData();
          formobimg.append("upload", this.testFile[0]);
          console.log(this)
          this.$http.post("http://www.tpdemo.com/tools/index/uploadImg",formobimg,{
            headers: { "Content-Type": "multipart/form-data" },
          });

        },

        //提交
        submitFn(){
          this.submitBtn = !this.submitBtn
          console.log(this.editorData)
          setTimeout(()=>{this.submitBtn = false},3000)
        },
        getCkeditorObj(id){
            var reObj = null;
            var ckInsArr = Reflect.ownKeys(CKEDITOR.instances)
            for(let obj of ckInsArr){
              if(CKEDITOR.instances[obj].config.bodyId == id){
                reObj = CKEDITOR.instances[obj]
                break;
              }
            }
            return reObj;
        },
        //重新设置编辑器的高度
        onEditorReady(){
           if(!this.ckeditorObj){
             this.ckeditorObj = this.getCkeditorObj("ckeditorDiv")
           }
           //重新设置编辑器高度
           this.ckeditorObj.resize("100%",document.body.clientHeight-48-52-25)
        }
      }
  }
</script>
<style>
 .custom-loader {
    animation: loader 1s infinite;
    display: flex;
  }
  @-moz-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-o-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
